<template>
	<view class="loginLayout">
		<!-- {{$t('login.login_account_title')}} -->
		<view class="logo">
			<image src="../../static/login/logo.png" mode="aspectFit"></image>
		</view>
		
		<view class="input-name">
			<input class="name" value="" placeholder-style="color:#999" :placeholder="$t('login.login_account_title')"
				@input="changeNameContent" />
		</view>
		 <!-- password="true" -->
		<view class="input-pwd">
			<input class="pwd" value=""  placeholder-style="color:#999" :placeholder="$t('login.login_pwd')"
				@input="changePwdContent" />
		</view>

		<view class="login-button" @click="toLogin">
			{{$t('login.login_btn')}}
		</view>
		<view class="register" @click="toRegister">
			{{$t('login.login_register')}}
		</view>
		<view class="bottom">
			<view class="forget-pwd" @click="toForgetPwd">
				{{$t('login.login_forgetpwd')}}？
			</view>
			<view class="emailLogin" @click="toEmailLogin">
				{{$t('login.login_emaillogin')}}
			</view>
		</view>
	
	</view>
</template>

<script>
	import { apiUserLogin } from '../../api/user_api';
import store from '../../store';
	import { encrypt } from '../../utils/encrypttools'
	import { i18nTool } from '../../utils/i18en';
	export default {
		data() {
			return {
				account:"",
				password:"",
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:i18nTool('login.navTitle')
			})
			// i18n.$t("log")
		},
		methods: {
	
			async toLogin(){
				
				if(!this.account){
					uni.showToast({
						title:i18nTool("login.login_inputAccountHint"),
						icon:'none'
					})
					return;
				}
				if(!this.password){
					uni.showToast({
						title:i18nTool('login.login_inputPwdHint'),
						icon:'none'
					})
					return;
				}
				const paramData = {
					account:this.account,
					password:encrypt(this.password),
				}
				uni.showLoading({
					title:"loading...",
					mask:true,
				})
				 await apiUserLogin(paramData).then(res=>{
					uni.setStorageSync('user',res.content.user);
				    uni.setStorageSync('token',res.content.token);
					uni.setStorageSync("hasDevice",res.content.hasDevice);
					uni.reLaunch({
						url:"/pages/map/map"
					});
				})
			},
			changeNameContent(e){
				this.account = e.detail.value;
			},
			changePwdContent(e){
				this.password = e.detail.value;
			},
			toRegister(){
				uni.navigateTo({
					url:"/pages/login/register"
				})
			},
			toForgetPwd(){
				uni.navigateTo({
					url:"/pages/login/forget-password"
				})
			},
			toEmailLogin(){
				uni.navigateTo({
					url:"/pages/login/email_login"
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.loginLayout {
		width: 100%;
		height: 100%;
		position: fixed;
		.logo {
			padding-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 400rpx;
				height: 200rpx;
			}
		}

		.input-name {
			margin-top: 30rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
			border: 2rpx solid #BDBDBD;
			border-radius: 10rpx;
			padding: 20rpx;
			.name {
				color: #333;
				font-size: 30rpx;
			}
		}
		
		.input-pwd {
			margin: 40rpx 40rpx;
			border: 2rpx solid #BDBDBD;
			border-radius: 10rpx;
			padding: 20rpx;
			.pwd {
				color: #333;
				font-size: 30rpx;
			}
		}

		.login-button {
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 60rpx;
			height: 80rpx;
			color: #fff ;
			background-color:#53786C;
			border-radius: 40rpx;
			@include flex-box-set(center);

		}
		.register {
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 20rpx;
			height: 80rpx;
			color:#fff;
			background-color:  #53786C ;
			border-radius: 40rpx;
			@include flex-box-set(center);
		
		}
		.bottom{
			display: flex;
			margin: 20rpx 60rpx;
			justify-content: space-between;
			.forget-pwd {
				@include flex-box-set(center);
				margin-top: 30rpx;
				color: #53786C;
			}
			.emailLogin {
				@include flex-box-set(center);
				margin-top: 30rpx;
				color: #53786C;
			}
		}

	
	}
</style>